<template>
  <div id="main_picture" class="container">
    <MainPicture :image-src="mainImageUrl" :image-position-y="rightContainerScrollPercent + '%'">
      <FloatButton text="DETAILS" link-option="details"/>
    </MainPicture>
  </div>
</template>

<script>
import MainPicture from "@/components/MainPicture";
import FloatButton from "@/components/FloatButton";

export default {
  name: "PicturePage",
  components: {FloatButton, MainPicture},
  data() {
    return {
      mainImageUrl: "./SUMMER_TIME_76134052.png",
      rightContainerScrollPercent: 0
    }
  }
}
</script>

<style scoped>
#main_picture {
  width: 50vw;
}

.phone #main_picture {
  width: 100%;
}
</style>